<template>
  <view class="tab">
    <scroll-view class="tabScroll" scroll-x="true" show-scrollbar="false">
      <view class="tab-box">
        <view v-for="(item, index) in list" :key="index" @click="onTabClick(index, item)">
          <view :style="current == index ? activeStyle : itemStyle">{{ item }}</view>
        </view>
      </view>
    </scroll-view>
    <view class="tab_setting">
      <uni-icons type="setting" size="28" color="#666"></uni-icons>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      required: true
    },
    current: {
      type: Number,
      default: 0
    }
  },
  computed: {
    activeStyle() {
      return {
        color: "#d00",
        fontSize: "35rpx",
        fontWeight: "bold",
        padding: "15rpx 20rpx",
        display: "inline-block"
      };
    },
    itemStyle() {
      return {
        color: "#000",
        fontSize: "30rpx",
        fontWeight: "normal",
        padding: "15rpx 20rpx",
        display: "inline-block"
      };
    }
  },
  methods: {
    onTabClick(index, item) {
      this.$emit("onTabClick", index, item);
    }
  }
};
</script>

<style scoped>
.tab {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 0 20rpx;
}
.tabScroll {
  flex: 1;
  height: 80rpx;
}
.tab-box {
  white-space: nowrap;
  height: 100%;
  display: flex;
  align-items: center;
}
.tab_setting {
  padding: 0 10rpx;
}
</style>